Server-Side Rendering vs. Client-Side Rendering

Introduction#

In terms of APIs, one of our goals is to make the applications perform better. Let’s take an example of a video hosting site. We might notice that it takes a while for the thumbnails of the videos to load, as shown in the illustration on the right. Suppose this video hosting site utilizes an optimized API gateway. However, the content may still be displayed after a significant delay. There are multiple reasons for having higher latency, with rendering being the most common. Rendering is described as the process of utilizing HTML, CSS, and JavaScript code into an interactive web page or depicting the web page in the browser.

In this lesson, we’ll explore numerous rendering techniques and determine when to utilize each one.

Server-side rendering (SSR)#

Server-side rendering (SSR) is a technique that generates a complete HTML document on the server and sends it to the client as a response to a request. The browser parses the HTML document and starts displaying it. On the initial load, the page is static and noninteractive. However, once the JavaScript file has been downloaded from the server, it modifies the DOM, and the page becomes interactive. DOM stands for Document Object Model. It's a programming interface used to represent an HTML document's content as a tree. The DOM provides structure to the HTML elements so we can easily access and manage them. Let's understand how server-side rendering works:

Note: The term "Paint" means when a pixel is visible to the user.

Let’s assume the following HTML document is received from the server. The document contains some content with a link:

The browser starts parsing the above document and displays the corresponding content. When a user clicks the “Careers” page link, the browser sends another request to the server and reloads the complete web page. We assume that both pages (current and “Careers”) have the same header and footer. So only the inner content needs to be updated. However, SSR reloads the complete page, which incurs the load on the server and the usage of unnecessary bandwidth. Therefore, developers mostly use SSR for when the web page initially loads.

When should SSR be used?#

• SSR works well when we need the initial load of the web page to be fast.

• If a web page consists of static content, then SSR is suitable for rendering the content quickly.

• SSR favors SEO because the browser populates the page without waiting for the JavaScript to render.

Client-side rendering (CSR)#

Client-side rendering (CSR) generates the complete web page in the browser instead of on the server. All the content, whether it is static or dynamic, is handled on the client side. The server sends the empty HTML file (which means no HTML content is populated except the basic structure of the HTML file) with JavaScript code or a link to it. The browser executes this JavaScript code to generate the web page.

Let's understand how CSR updates or renders the content in the browser:

Let’s assume the following HTML document is received from the server. The document contains only the <div> </div> tags with the main ID. The content is populated after the <script> tag on the client-side.

The content creation on the client-side can be handled using multiple frameworks such as React, Vue, Angular, and so on. These frameworks allow rerendering of specific DOM elements to update the data or user interface.

When should CSR be used?#

• It is preferable to use it for websites that update their content frequently.

• If the web page consists of dynamic content, then CSR is good for rendering the dynamic content quickly.

• If SEO (search engine optimization) is not a goal of the website, then we can use CSR.

Discussion#

From the details mentioned above, we can see that both SSR and CSR have their pros and cons, and there is no clear winner. Today's websites and applications are also full of rich features and require both the advantages of SSR and CSR at different levels and hierarchies. Using just SSR for the entire application may degrade the application's performance and further depreciate over time because we might add additional load onto the server. However, If we use CSR to bypass the load on the server, the initial load of the page might increase. A suitable option is to use a mixture of both techniques to utilize the advantages of both approaches and improve user experience.

We can take the example of a social media application that primarily uses SSR with minimal CSR to render its website pages. In contrast, others may do the complete opposite depending on their requirements. For example, YouTube uses a combination of both approaches. To achieve this, YouTube uses SPF (structured page fragments) for static and dynamic loading of the web page's content.

Summary#

In this lesson, we discussed different rendering schemes and learned which is preferred for each use case. Primarily, we looked at user-perceived latency and learned how to minimize it for a better experience.